<template>

  <div class="container loginVue">
    <vue-particles color="#dedede" :particleOpacity="0.7" :particlesNumber="120" shapeType="star" :particleSize="5"
      linesColor="#FFFFFF" :linesWidth="2" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3"
      :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" class="cash"
      style="pointer-events: none;">
    </vue-particles>

    <iframe src="http://106.53.210.134:50401/dashboard/show/f5725390218e7b3e3072/?DG_SAFE_SESSION=1"
      style="width:100%;height:100%;border:0;"></iframe>
    <div class="login">
      <!-- <div class="tittle">登录</div> -->
      <div class="form">
        <el-form :model="form" :rules="rules" ref="ruleForm" size="small" class="login-form">
          <el-form-item prop="schoolId" v-show="show">
          </el-form-item>
          
            <el-form-item prop="username">
              <el-input placeholder="请输入您的学号/工号" v-model="form.username">
                <span slot="prefix" class="el-icon el-icon-user"></span>
              </el-input>
            </el-form-item>
            
            <el-form-item prop="password">
              <el-input type="password" placeholder="请输入您的密码  " v-model="form.password" @keyup.enter.native="submit"
                show-password>
                <span slot="prefix" class="el-icon el-icon-lock"></span></el-input>
            </el-form-item>
          

          <div class="right">
            <el-form-item prop="submit">
              <el-button class="submit" type="primary" @click="submit()">登录</el-button>
            </el-form-item>
            <div class="forget">忘记密码</div>
          </div>
          


        </el-form>
      </div>

    </div>
    <div class="footer">
      <p>粤ICP备2022047280号</p>
      <span>SCAU传智工作室&nbsp;</span>
      <span>Copyright © 2021</span>
      <span>&nbsp;All rights reserved</span>

    </div>
  </div>
</template>
<script>
import Vue from "vue";
import VueParticles from "vue-particles";
import { login, schools } from "@/api/login";
Vue.use(VueParticles);
export default {
  data() {
    return {
      login: false,
      form: {
        username: "",
        schoolId: "1",
        password: ""
      },
      options: [],
      rules: {
        schoolId: [
          { required: false, message: "请选择学校", trigger: "change" }
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      schoolEnglish: window.document.location.host,
      schooll: null,
      show: true,
    };
  },
  created() {
    // this.schoolEnglish=this.schoolEnglish.substring(0,this.schoolEnglish.indexOf("."));
    // console.log(this.schoolEnglish);
    // this.login = false;
    // let obj = {
    //   pageNum: 1,
    //   pageSize: 100
    // };
    // schools(obj).then(res => {
    //   this.options = res.data;
    //   console.log(this.options);
    //   try {
    //     res.data.forEach(item => {
    //       let school = item;
    //       if(school.schoolEnglishName == this.schoolEnglish) {
    //         this.school = school;
    //         this.form.schoolId = school.id;
    //         this.show = false;
    //         throw Error();
    //       }else {
    //         this.school = null;
    //         this.show = true;
    //       }
    //     })
    //   } catch(err) {
    //     console.log(err);
    //   }

    // });

  },
  beforeRouteLeave(to, from, next) {
    // just use `this`
    if (!this.login) {
      this.$message("请先登录");
      next(false);
    } else {
      next();
    }
  },
  methods: {
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.login = true;
          //delete this.form.schoolId;
          //当登录接口不可用时
          /* this.$store.commit("setRole", "superAdmin"); //"student","teacher","schoolAdmin","superAdmin"
            this.$router.push({ path: "/main" });   */

          login(this.form).then(
            res => {
              try {
                localStorage.setItem("user", JSON.stringify(res.data)); //保存用户信息
              } catch (err) {
                this.$message.error(err);
              }
              this.$store.commit("setRole", res.data.roleName); //"student","teacher","schoolAdmin","superAdmin"
              this.$message.success("登录成功！");
              this.$router.push({ path: "/main" });
            },
            err => {
              if (err.status == 500)
                this.$message.error("用户不存在or密码错误");
            }
          );
        }
      });
    },
    //使用第三方登录，index为0代表QQ登录  index为1代表微信登录
    /*otherLogin(index){
      
    }*/
  }
};
</script>

<style scoped>
>>> .el-input__inner {
  background-color: #36567b;
  color: white;
}

.login-form {
  display: flex;
}
.right {
  display: flex;
}


.container {
  height: 100%;
  /* background: url("~@/assets/img/backgroud.jpg") center center no-repeat; */
  background-size: 100% 100%;
  width: 100%;
  position: relative;
  overflow: hidden;

}

.login {
  width: 615px;
  height: 80px;
  /* background-color: #000c3b; */
  /* background-color: #f4f4f5; */
  opacity: 0.9;
  position: absolute;
  top: 8%;
  left: 82%;
  transform: translate(-50%, -50%);
}

.form {
  width: 90%;
  margin: 0 auto;
}

.el-icon {
  color: #3b77e3;
  font-size: 22px;
  vertical-align: middle;
}

/* .loginFooter {
  height: 70px;
  text-align: left;
  padding-top: 10px;
  background-color: white;
  
}
.loginFooterTitle {

  margin-left: 30px;
  font-size:14px;
  font-weight: 700px;
  color: rgb(192, 189, 189);
} */
.footIcon {
  font-size: 35px;
  text-align: center;
}

.icon {
  margin-right: 5px;
  margin-top: 10px;
  cursor: pointer;
}

.el-input {
  width: 100%;
}

.el-select {
  width: 100%;
}

.footer {
  color: white;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  line-height: 20px;
  font-size: 12px;
  font-weight: 600;
}

.submit {
  width: 90%;
  height: 35px;
  vertical-align: middle;
  /* margin-top: 14px; */
  margin-left: 8px;
}

.tittle {
  font-size: 25px;
  color: #3b77e3;
  margin: 15px 20px 15px 20px;
  font-weight: 500;
  padding-bottom: 5px;
  border-bottom: 2px solid #3b77e3;
}

.forget {
  font-size: 12px;
  color: #169bd5;
  text-align: center;
  cursor: pointer;
  margin-top: 10px;
  margin-left: 8px;
}

.forget:hover {
  text-decoration: underline;
}

.cash {
  position: fixed;
  top: 0px;
  bottom: 100px;
  width: 100%;
}
</style>
